<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>
.a{
height:50px;
width:200px;
border:1px solid #ccc;
background-color:#eee;

}

.b{
height:50px;
border:1px solid #ccc;
background-color:red;

}
	</style>
	
	</head>
<body style="margin:100px">

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center"></p>

<div class="modal" id="myModal">

<!-- 窗口声明 --> 
<div class="modal-dialog">

<!-- 内容声明 -->
 <div class="modal-content">

<!-- 头部 -->

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">

<span>&times;</span>

</button>

<h4 class="modal-title">会员登录</h4> </div>
<!-- 主体 -->

<div class="modal-body">

<p>暂时1无法登录会员</p> </div>
<!-- 注脚 -->

<div class="modal-footer">

<button type="button" class="btn btn-default">

注册</button> <button type="button" class="btn btn-primary">
登录</button>

</div>

</div>
</div>

</div>

//点击触发模态框显示

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >点击1弹窗

</button>




<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">  小号</p>

<div class="modal" id="myModal1">

<!-- 窗口声明 --> 
<div class="modal-dialog modal-sm">

<!-- 内容声明 -->
 <div class="modal-content">

<!-- 头部 -->

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">

<span>&times;</span>

</button>

<h4 class="modal-title">会员登录</h4> </div>
<!-- 主体 -->

<div class="modal-body">

<p>暂时无法登录会员</p> </div>
<!-- 注脚 -->

<div class="modal-footer">

<button type="button" class="btn btn-default">

注册</button> <button type="button" class="btn btn-primary">
登录</button>

</div>

</div>
</div>

</div>

//点击触发模态框显示

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal1" >点击弹窗

</button>



<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">  淡入淡出效果</p>

<div class="modal fade" id="myModal2">

<!-- 窗口声明 --> 
<div class="modal-dialog modal-sm">

<!-- 内容声明 -->
 <div class="modal-content">

<!-- 头部 -->

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">

<span>&times;</span>

</button>

<h4 class="modal-title">会员登录</h4> </div>
<!-- 主体 -->

<div class="modal-body">

<p>暂时无法登录会员</p> </div>
<!-- 注脚 -->

<div class="modal-footer">

<button type="button" class="btn btn-default">

注册</button> <button type="button" class="btn btn-primary">
登录</button>

</div>

</div>
</div>

</div>

//点击触发模态框显示

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal2" >点击弹窗

</button>



<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">  流体效果</p>

<div class="modal fade" id="myModal3">

<!-- 窗口声明 --> 
<div class="modal-dialog modal-sm">

<!-- 内容声明 -->
 <div class="modal-content">

<!-- 头部 -->

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">

<span>&times;</span>

</button>

<h4 class="modal-title">会员登录</h4> </div>
<!-- 主体 -->

<div class="modal-body">

<div class="container-fluid"> <div class="row">

<div class="col-md-4">1</div> <div class="col-md-4">1</div> <div class="col-md-4">1</div>

</div>

</div>

</div>
<!-- 注脚 -->

<div class="modal-footer">

<button type="button" class="btn btn-default">

注册</button> <button type="button" class="btn btn-primary">
登录</button>

</div>

</div>
</div>

</div>

//点击触发模态框显示

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal3" >点击弹窗

</button>
<br/><br/>

//点击空白地方无法关闭

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal3" data-backdrop="false">点击弹窗

</button>
<br/><br/>

//还有 data-backdrop="static"   data-keyboard data-show



<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">  远程加载</p>

<div class="modal fade" id="myModal3">

<!-- 窗口声明 --> 
<div class="modal-dialog modal-sm">

<!-- 内容声明 -->
 <div class="modal-content">

<!-- 头部 -->

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">

<span>&times;</span>

</button>

<h4 class="modal-title">远程加载</h4> </div>
<!-- 主体 -->

<div class="modal-body">

<div class="container-fluid"> <div class="row">

<div class="col-md-4">1</div> 
<div class="col-md-4">1</div>
 <div class="col-md-4">1</div>

</div>

</div>

</div>
<!-- 注脚 -->

<div class="modal-footer">

<button type="button" class="btn btn-default">

注册</button> <button type="button" class="btn btn-primary">
登录</button>

</div>

</div>
</div>

</div>

//点击触发模态框显示

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal3" href="index15.html">点击弹窗

</button>
<br/><br/>





<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">  用jquery加载</p>

<div class="modal fade" id="myModal3">

<!-- 窗口声明 --> 
<div class="modal-dialog modal-sm">

<!-- 内容声明 -->
 <div class="modal-content">

<!-- 头部 -->

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">

<span>&times;</span>

</button>

<h4 class="modal-title">用jquery加载</h4> </div>
<!-- 主体 -->

<div class="modal-body">

<div class="container-fluid"> <div class="row">

<div class="col-md-4">1</div> 
<div class="col-md-4">1</div>
 <div class="col-md-4">1</div>

</div>

</div>

</div>
<!-- 注脚 -->

<div class="modal-footer">

<button type="button" class="btn btn-default">

注册</button> <button type="button" class="btn btn-primary">
登录</button>

</div>

</div>
</div>

</div>




















<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>

</body>
</html>